<template>
  <div class="app-container">
    <div class="filter-container tw-filter">
      <el-form ref="dataForm" :model="form" label-position="right" label-width="180px" style="width: 800px; margin:0 auto;">
        <el-form-item label="状态">
          <el-radio-group v-model="form.is_al_oss">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="RAM账号 KeyId" prop="al_oss_key_id">
          <el-input  v-model="form.al_oss_key_id" placeholder="RAM账号 KeyId" class="filter-item tw-filter-input" style="width:500px"/>
        </el-form-item>
        <el-form-item label="RAM账号 KeySecret" prop="al_oss_key_secret">
          <el-input  v-model="form.al_oss_key_secret" placeholder="RAM账号 KeySecret" class="filter-item tw-filter-input" style="width:500px"/>
        </el-form-item>
        <el-form-item label="地域节点" prop="al_oss_endpoint">
          <el-input  v-model="form.al_oss_endpoint" placeholder="地域节点" style="display:flex; width:500px" class="filter-item tw-filter-input"/>
        </el-form-item>
        <el-form-item label="存储空间域名" prop="al_oss_bucket_url">
          <el-input  v-model="form.al_oss_bucket_url" placeholder="存储空间域名" style="display:flex; width:500px" class="filter-item tw-filter-input"/>
        </el-form-item>
        <el-form-item label="存储空间名称" prop="al_oss_bucket_name">
          <el-input  v-model="form.al_oss_bucket_name" placeholder="存储空间名称" style="display:flex; width:500px" class="filter-item tw-filter-input"/>
        </el-form-item>
        <el-form-item label="自定义规则代码" prop="al_oss_custom_rules">
          <el-input v-model="form.al_oss_custom_rules"  type="textarea" :rows="5" style="width:500px"/>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <el-button style="margin-left:40%;" v-waves class="filter-item tw-filter-button" @click="updateData()">保存数据</el-button>
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive

export default {
  directives: { waves },
  data() {
    return {
      apiPath: 'project.service',
      // 表单数据
      form: {
        is_al_oss:1,               //是否启用 1-是 0-否
        al_oss_key_id:'',           //RAM账号 KeyId
        al_oss_key_secret:'',       //RAM账号 KeySecret
        al_oss_endpoint:'',         //地域节点 Endpoint
        al_oss_bucket_url:'',       //存储空间域名
        al_oss_bucket_name:'',      //存储空间名称
        al_oss_custom_rules:'',     //自定义规则代码
      },
    }
  },
  created() {
    // 获取详情
    this.$api.getDetail({}, this.apiPath).then(response => {
      //数据处理
      for(let key in this.form){
        if(response.detail.hasOwnProperty(key)){
          this.form[key] = response.detail[key]
        }
      }
    })
  },
  methods: {
    // 保存数据
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$api.edit(this.form, this.apiPath).then(response => {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
          })
        }
      })
    }
    
  }
}
</script>
